<template>
    <div class="reportSet">
        <h3 class="reportHeader">森林火情监测简报核实</h3>
        <div class="infoBox">
            <div class="jianbaoBox Box">
                <h4>一、简报信息</h4>
                <div class="jianbaoItem Item">
                    <p>简报标题:</p>
                    <el-input
                        v-model="reportInfo.template.headerBig"
                    ></el-input>
                    <p>简报编号:</p>
                    <el-input
                        v-model="reportInfo.template.reportCode"
                    ></el-input>
                    <p>上报单位:</p>
                    <el-input
                        v-model="reportInfo.template.reportUnit"
                    ></el-input>
                    <p>编辑单位:</p>
                    <el-input v-model="reportInfo.template.reporter"></el-input>
                    <p>联系电话:</p>
                    <el-input v-model="reportInfo.template.phone"></el-input>
                </div>
            </div>
            <div class="jianceBox Box">
                <h4>二、火情监测信息</h4>
                <p>时间:</p>
                <el-input v-model="reportInfo.fireBase.time"></el-input>
                <p>地点:</p>
                <el-input v-model="reportInfo.fireBase.place"></el-input>
                <p>经度：</p>
                <el-input
                    class="small"
                    v-model="reportInfo.fireBase.lon"
                    
                ></el-input>
                <p>纬度：</p>
                <el-input
                    class="small"
                    v-model="reportInfo.fireBase.lat"
                    
                ></el-input>
                <p>距离:</p>
                <el-input v-model="reportInfo.fireBase.distance"></el-input>
                <p>方位角:</p>
                <el-input v-model="reportInfo.fireBase.direction"></el-input>
                <p>高程:</p>
                <el-input v-model="reportInfo.fireBase.height"></el-input>
                <!-- <p>热点数</p>
                <el-input v-model="reportInfo.fireBase.hotNum"></el-input> -->
                <p>植被分布:</p>
                <el-input v-model="reportInfo.fireBase.veg"></el-input>
            </div>
            <div class="fuheBox Box">
                <h4>三、火情复核信息</h4>
                <div class="describeBox">
                    <p>复核情况:</p>
                    <!-- <div class="describe" contenteditable="true" placeholder="请输入内容"></div> -->
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="reportInfo.checkRes.words"
                    >
                    </el-input>
                    <!-- <p>伤亡情况:</p> -->
                    <div class="hurt">
                        <p>死亡：</p>
                        <el-input
                            v-model="reportInfo.checkRes.death"
                            onkeyup="value=value.replace(/[^\d]/g,'')"
                        ></el-input>
                        <p>受伤：</p>
                        <el-input
                            v-model="reportInfo.checkRes.hurt"
                            onkeyup="value=value.replace(/[^\d]/g,'')"
                        ></el-input>
                        <p>失踪：</p>
                        <el-input
                            v-model="reportInfo.checkRes.miss"
                            onkeyup="value=value.replace(/[^\d]/g,'')"
                        ></el-input>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn">
            <p @click="showControl(true)">简报预览</p>
        </div>
        <PreviewReport
            v-if="showReport"
            :reportInfo="reportInfo"
            @closePreview="showControl"
        ></PreviewReport>
    </div>
</template>

<script>
import axios from "axios";
import PreviewReport from "./FireMonitorSimpleReportPreview";
export default {
    name: "reportSet",
    data() {
        return {
            showReport: false, //预览控制
            reportInfo: {
                fireId: null,
                // 简报模板数据
                template: {
                    headerBig: "海南省森林防火火情简报",
                    reportUnit: "海南省森林防火指挥部办公室",
                    reportTime: "2021-06-12",
                    headerSmall: "",
                    reportCode: "20210401-001",
                    reporter: "海南省森林防火指挥部办公室",
                    phone: "183*******",
                },
                // 火点信息数据
                fireBase: {
                    fireCode: "HD-20210401002",
                    time: "2021年4月1日  00时37分",
                    place: "海南省昌江岔河镇**村",
                    lon: "119.51°E",
                    lat: "19.50°N",
                    distance: "10km",
                    angle: "顺时针115°",
                    height: "25m",
                    hotNum: "3个",
                    veg: "植被覆盖度45%，其中森林10%，草地90%",
                },
                // 火点复核数据
                checkRes: {
                    words: "无",
                    hurt: "死亡__人，受伤__人，失踪__人",
                    death: "",
                    hurt: "",
                    miss: "",
                },
                // poi点数据
                poiList: [
                    {
                        group: "救援力量",
                        children: [
                            {
                                type: "救援队伍",
                                therader: [
                                    { prop: "value1", label: "队伍类别" },
                                    { prop: "value2", label: "队伍名称" },
                                    { prop: "value3", label: "队伍人数" },
                                    { prop: "value4", label: "联系电话" },
                                ],
                                dataList: [
                                    {
                                        value1: "-",
                                        value2: "-",
                                        value3: "-",
                                        value4: "-",
                                    },
                                ],
                            },
                            {
                                type: "医疗保障资源",
                                therader: [
                                    { prop: "value1", label: "医疗资源类别" },
                                    { prop: "value2", label: "医疗资源名称" },
                                    { prop: "value3", label: "医疗资源位置" },
                                    { prop: "value4", label: "联系电话" },
                                ],
                                dataList: [
                                    {
                                        value1: "-",
                                        value2: "-",
                                        value3: "-",
                                        value4: "-",
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        group: "救援物资",
                        children: [
                            {
                                type: "救援物资",
                                therader: [
                                    { prop: "value1", label: "救援物质类别" },
                                    { prop: "value2", label: "救援物质名称" },
                                    { prop: "value3", label: "救援物质位置" },
                                    { prop: "value4", label: "联系电话" },
                                ],
                                dataList: [
                                    {
                                        value1: "-",
                                        value2: "-",
                                        value3: "-",
                                        value4: "-",
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        group: "重点防护目标",
                        children: [
                            {
                                type: "重点防护目标",
                                therader: [
                                    { prop: "value1", label: "防护目标类别" },
                                    { prop: "value2", label: "防护目标名称" },
                                    { prop: "value3", label: "防护目标位置" },
                                    { prop: "value4", label: "联系电话" },
                                ],
                                dataList: [
                                    {
                                        value1: "-",
                                        value2: "-",
                                        value3: "-",
                                        value4: "-",
                                    },
                                ],
                            },
                        ],
                    },
                ],
                // 专题图数据
                imgUrl: "",
                // imgUrl:`${globalUrl.BASE_URL}/thematic/7569e7b9-b50f-4836-983d-a3c93dd0e26b.png`,
                imgId: null,
                // imgId:32,
            },
            cityCenter: {
                海口市: [110.198418, 20.045805],
                三亚市: [109.511709, 18.252865],
                三沙市: [112.234483, 16.774644],
                儋州市: [109.580812, 19.520948],
                五指山市: [109.516784, 18.774827],
                文昌市: [110.797473, 19.544234],
                琼海市: [110.474524, 19.259112],
                万宁市: [110.392605, 18.793697],
                东方市: [108.651829, 19.095187],
                定安县: [110.358001, 19.681215],
                屯昌县: [110.101667, 19.351662],
                澄迈县: [110.007497, 19.738885],
                临高县: [109.690508, 19.912025],
                白沙黎族自治县: [109.4429, 19.221641],
                昌江黎族自治县: [109.055783, 19.298139],
                乐东黎族自治县: [109.173384, 18.750063],
                陵水黎族自治县: [110.037553, 18.506045],
                保亭黎族苗族自治县: [109.700373, 18.640156],
                琼中黎族苗族自治县: [109.838389, 19.033369],
            },
        };
    },
    components: {
        PreviewReport,
    },
    computed: {
        radius(){
            return this.$store.state.circleRadius
        },
        fireId() {
            return this.$store.state.reportFireId;
        },
    },
    watch: {
        radius:{
            handler(val) {
                this.getPoi();
            },
            immediate: true,
        },
        fireId: {
            handler(val) {
                console.log(val);
                this.getFireData();
            },
            immediate: true,
        },
    },
    mounted() {
        let timeobj = this.initTime();
        this.reportInfo.template.reportTime =
            timeobj.year +
            "年" +
            this.dateFormate(timeobj.month) +
            "月" +
            this.dateFormate(timeobj.day) +
            "日";
    },
    methods: {
        // 报告预览控制按钮
        showControl(type) {
            this.reportInfo.imgUrl = viewer.scene.canvas
                .toDataURL("image/png")
                .replace("image/png", "image/octet-stream");
            this.showReport = type;
        },
        // 获取火点详情
        async getFireData() {
            // 获取火点编号
            let timeobj = this.initTime();
            this.reportInfo.template.reportTime =
                timeobj.year +
                "年" +
                this.dateFormate(timeobj.month) +
                "月" +
                this.dateFormate(timeobj.day) +
                "日";
                // 获取简报简报
            let resa = await axios.get(
                `${window.sjzxUrl}/api/special-report/fire/countByDay`
            );
            let sortRes = resa.data;
            console.log(sortRes);
            sortRes++;
            let sort =
                sortRes < 10
                    ? `00${sortRes}`
                    : sortRes < 100
                    ? `0${sortRes}`
                    : sortRes;
            this.reportInfo.template.reportCode =
                timeobj.year +
                this.dateFormate(timeobj.month) +
                this.dateFormate(timeobj.day) +
                "-" +
                sort;

            let res = await axios.get(
                `${window.huoqingApiUrl}/task/firePointDetail`,
                { params: { id: this.fireId } }
            );
            console.log(res);
            let fireRes = res.data;
            this.reportInfo.fireBase.fireCode = fireRes.code;
            this.reportInfo.fireBase.time =
                fireRes.observeTime
                    .replace("-", "年")
                    .replace("-", "月")
                    .replace(" ", "日 ")
                    .replace(":", "时")
                    .replace(":", "分") + "秒";
            this.reportInfo.fireBase.place = fireRes.cityRegion;
            this.reportInfo.fireBase.lon = fireRes.longitude;
            this.reportInfo.fireBase.lat = fireRes.latitude;
            // this.reportInfo.fireBase.distance = fireRes.distance + 'Km';
            // this.reportInfo.fireBase.angle = fireRes.direction + '°';
            // this.reportInfo.fireBase.height = fireRes.elevationAver + 'm';
            this.reportInfo.fireBase.hotNum = fireRes.hotspot;
            let all = fireRes.gfAver ? fireRes.gfAver + "%" : "未知";
            let senlin = fireRes.forestPercent
                ? fireRes.forestPercent + "%"
                : 0;
            let caodi = fireRes.lawnPercent ? fireRes.lawnPercent + "%" : 0;
            let nongtian = fireRes.farm ? fireRes.farm + "%" : 0;
            let guanmu = fireRes.bush ? fireRes.bush + "%" : 0;
            let chengshi = fireRes.city ? fireRes.city + "%" : 0;
            let veg = `植被覆盖度${all}, 其中森林${senlin},草地${caodi},农田及自然植被${nongtian},灌木${guanmu},城市或荒漠${chengshi}`;
            this.reportInfo.fireBase.veg = veg;
            this.reportInfo.fireId = this.fireId;
            console.log(this.reportInfo.fireId)
            // 获取poi点集合
            this.getPoi();

            // 手动计算
            let cityLonLat = this.cityCenter[res.data.cityRegion];
            this.reportInfo.fireBase.distance =
                this.calcDistance(cityLonLat, [
                    res.data.longitude,
                    res.data.latitude,
                ]).toFixed(3) + "Km";
            this.reportInfo.fireBase.direction = this.calcAngle(cityLonLat, [
                res.data.longitude,
                res.data.latitude,
            ]);
            this.reportInfo.fireBase.height = "未知";
        },
        // 获取poi点集合
        async getPoi() {
            console.log(this.radius)
            let params = {
                lon: this.reportInfo.fireBase.lon,
                lat: this.reportInfo.fireBase.lat,
                radius: this.radius * 1000,
            };
            // let res = await getReportPoi(params);
            let res = await axios.get(
                `${window.huoqingApiUrl}/api/special-report/fire/pois`,
                { params: params }
            );
            this.reportInfo.poiList = res.data.poiList;
            console.log(this.reportInfo.poiList);
        },
        // 初始化时间
        initTime() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            return {
                year: year,
                month: month,
                day: day,
            };
        },
        // 日期格式化
        dateFormate(date) {
            if (date < 10) {
                return "0" + date;
            } else {
                return date;
            }
        },
        // 计算距离
        calcDistance(p1, p2) {
            const distance = turf.distance(turf.point(p1), turf.point(p2), {
                units: "kilometers",
            }); //转换单位 米
            return distance;
        },
        calcAngle(p1, p2) {
            let describe = "0";
            let num = "0";
            let angle = turf.bearing(p1, p2).toFixed(3);
            angle = parseInt(angle);
            if (angle > 0 && angle < 90) {
                describe = "北偏东";
                num = angle;
            } else if (angle > 90 && angle < 180) {
                describe = "东偏南";
                num = angle - 90;
            } else if (angle < 0 && angle > -90) {
                describe = "北偏西";
                num = Math.abs(angle);
            } else if (angle < -90 && angle > -180) {
                describe = "西偏南";
                num = Math.abs(angle + 90);
            }
            return `${describe}${num}°`;
        },
    },
};
</script>
<style lang="stylus">
.el-input__inner, .el-textarea__inner {
    background: rgba(16, 34, 67, 0.5);
    border: 1px solid rgba(23, 208, 255, 0.5);
    color: #fff;
}
</style>
<style lang="stylus" scoped>
.reportSet {
    width: vw(400);
    height: vh(965);
    padding:vh(10) vw(10);
    display: flex;
    flex-direction: column;
    background:rgba(0,0,0,.3);
    .reportHeader {
        width:80%;
        margin: vh(5) auto;
        height: vh(30);
        line-height: vh(30);
        padding-bottom: vh(40);
        font-size: vw(20);
        text-align: center;
        font-family: 'Source Han Serif SC, Source Han Serif SC-Heavy';
        font-weight: 800;
        border-bottom:2px solid #18485d;
    }
    .infoBox {
        flex: 1;
        overflow: auto;
        .jianbaoBox{
            width:90%;
            margin:0 auto;
            h4 {
                font-weight: 100;
                line-height: vh(30);
                font-size: vw(18);
                color:#00DEFF;
            }
            .jianbaoItem{
                p{
                    height:vh(50);
                    line-height:vh(50);
                }
            }
        }
        .jianceBox{
            width:90%;
            margin:0 auto;
            p{
                height:vh(50);
                line-height:vh(50);
            }
        }
        .fuheBox{
            width:90%;
            margin:0 auto;
            .describeBox{
                p{
                    height:vh(50);
                    line-height:vh(50);
                }
                .hurt{
                    p{
                        height:vh(50);
                        line-height:vh(50);
                    }
                }
            }
        }
        .Box {
            text-align: left;

            h4 {
                font-weight: 100;
                line-height: vh(40);
                font-size: vw(18);
                color:#00DEFF;
            }
        }
    }
    .btn {
        p {
            cursor: pointer;
            float: right;
            border: 1px solid #ddd;
            text-align: center;
            height: vh(30);
            line-height: vh(30);
            width: vw(100);
            margin-top: vh(20);
        }
    }
}
</style>